<template>
	<view>
		<view class="banner">
			<image :src="https+detectionCarReportGetCarReportList.frontLeft45" mode=""></image>
		</view>
		<view class="main">
			<view class="mainBtitles">
				{{detectionCarReportGetCarReportList.modelName}}
			</view>
			<view class="mainStitles">
				vin:{{detectionCarReportGetCarReportList.vin}}
			</view>
		</view>
		<view class="footerT" style="padding-bottom: 0;">
			<view class="mainBtitles">
				车辆综合评分
			</view>

			<view class="type">
				优
			</view>

			<view class="carType">
				非事故车·非泡水车·非火烧车
			</view>
			
			<view class="typeImg">
				<view>
					<image src="../../static/sgcldy1.png" mode="" class="imgss"></image>
					<text>事故监测</text>
				</view>
				<view>
					<image src="../../static/pscldy.png" mode="" class="imgss"></image>
					<text>泡水检测</text>
				</view>
				<view>
					<image src="../../static/hscldy.png" mode="" class="imgss"></image>
					<text>火烧检测</text>
				</view>
				<view>
					<image src="../../static/xhjc.png" mode="" class="imgss"></image>
					<text>续航检测</text>
				</view>
			</view>
			
			<view class="jcsj">
				检测时间：2021-07-26
			</view>
		</view>

		<view class="footerT" style="padding-bottom: 20rpx;">
			<u-table padding='24rpx' border-color="#002B56" font-size="28" color="color: #2C2C2C;">
				<u-tr class="u-tr">
					<u-th class="u-th">
						<view class="tit">
							<image src="../../static/zscx.png" mode=""></image>车辆信息
						</view>
					</u-th>

				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">品牌</u-td>
					<u-td class="u-td">{{detectionCarReportGetCarReportList.brandName}}</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">车型</u-td>
					<u-td class="u-td">{{detectionCarReportGetCarReportList.modelName}}</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">车辆用途</u-td>
					<u-td class="u-td">--</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">使用性质</u-td>
					<u-td class="u-td">--</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">续航里程</u-td>
					<u-td class="u-td">{{detectionCarReportGetCarReportList.maximumPowerKw}}km</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">电池类型</u-td>
					<u-td class="u-td">--</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">所在地</u-td>
					<u-td class="u-td">--</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">车牌号</u-td>
					<u-td class="u-td">{{detectionCarReportGetCarReportList.plateNum}}</u-td>
				</u-tr>
			</u-table>


		</view>

		<view class="footerT" style="padding-bottom: 20rpx;">
			<u-tabs :list="list" :is-scroll="false" font-size='34' :current="current" @change="change" :bar-width="150"
				active-color="#002B56"></u-tabs>
			<view style="margin-top: 20rpx;"></view>	
		
		</view>

		<view v-if="current==0">
			<view class="footerT">
				<u-table padding='24rpx' border-color="#002B56" font-size="28" color="color: #2C2C2C;" v-if="current==0">
					<u-tr class="u-tr">
						<u-th class="u-th">
							<view class="tit">
								<image src="../../static/gjzbpg.png" mode=""></image>电池检测
							</view>
						</u-th>
				
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">电池健康度</u-td>
						<u-td class="u-td">100%</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">满电续航</u-td>
						<u-td class="u-td">300km</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">剩余寿命</u-td>
						<u-td class="u-td">大于2万公里</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">电池运行时间</u-td>
						<u-td class="u-td">30天</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">充放电次数</u-td>
						<u-td class="u-td">1000次</u-td>
					</u-tr>
				</u-table>
						
			</view>
			<view class="footerT" style="padding-bottom: 20rpx;">
			
				<u-table padding='24rpx' border-color="#002B56" font-size="28" color="color: #2C2C2C;">
					<u-tr class="u-tr">
						<u-th class="u-th">
							<view class="tit">
								<image src="../../static/ybwxls.png" mode=""></image>维修信息
							</view>
						</u-th>
			
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view><text class="ttt">时间：</text>2021-06</view>
						</u-td>
						<u-td class="u-td">
							<view><text class="ttt">里程：</text>2万公里</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">项目</text>：进入或退出验证模式；（更换）动力
								电池总成的拆装。</view>
							<view class="tit1"><text class="ttt">材料</text>：长城YC-2有机防冻液：2.00</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">项目</text>：进入或退出验证模式；（更换）动力
								电池总成的拆装。</view>
							<view class="tit1"><text class="ttt">材料</text>：长城YC-2有机防冻液：2.00</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">项目</text>：进入或退出验证模式；（更换）动力
								电池总成的拆装。</view>
							<view class="tit1"><text class="ttt">材料</text>：长城YC-2有机防冻液：2.00</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">项目</text>：进入或退出验证模式；（更换）动力
								电池总成的拆装。</view>
							<view class="tit1"><text class="ttt">材料</text>：长城YC-2有机防冻液：2.00</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
			<view class="footerT" style="padding-bottom: 20rpx;">
			
				<u-table padding='24rpx' border-color="#002B56" font-size="28" color="color: #2C2C2C;">
					<u-tr class="u-tr">
						<u-th class="u-th">
							<view class="tit">
								<image src="../../static/ybwxls.png" mode=""></image>召回信息
							</view>
						</u-th>
			
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">召回时间：</text>2021-06</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">项目</text>：进入或退出验证模式；（更换）动力
								电池总成的拆装。</view>
							<view class="tit1"><text class="ttt">材料</text>：长城YC-2有机防冻液：2.00</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">召回时间：</text>2021-06</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">项目</text>：进入或退出验证模式；（更换）动力
								电池总成的拆装。</view>
							<view class="tit1"><text class="ttt">材料</text>：长城YC-2有机防冻液：2.00</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">召回时间：</text>2021-06</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">项目</text>：进入或退出验证模式；（更换）动力
								电池总成的拆装。</view>
							<view class="tit1"><text class="ttt">材料</text>：长城YC-2有机防冻液：2.00</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">召回时间：</text>2021-06</view>
						</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">
							<view class="tit1"><text class="ttt">项目</text>：进入或退出验证模式；（更换）动力
								电池总成的拆装。</view>
							<view class="tit1"><text class="ttt">材料</text>：长城YC-2有机防冻液：2.00</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
		<view v-if="current==1">
		<view class="footerT" style="padding-bottom: 20rpx;" v-for="(item,index) in detectionCarReportGetCarReportList.itemsGroup" :key='index'>
		
			<u-table padding='24rpx' border-color="#002B56" font-size="28" color="color: #2C2C2C;">
				<u-tr class="u-tr">
					<u-th class="u-th">
						<view class="tit">
							<image src="../../static/cljbxx.png" mode="" v-if="index=='车辆信息'"></image>
							<image src="../../static/sgcldy.png" mode="" v-if="index=='事故检测'"></image>
							<image src="../../static/ps.png" mode="" v-if="index=='水泡检测'"></image>
							<image src="../../static/hs.png" mode="" v-if="index=='火烧检测'"></image>
							
							<text>{{index}}   {{detectionCarReportGetCarReportList.itemsGroup[index].length}}项</text>
						</view>
					</u-th>
		
				</u-tr>
				<u-tr class="u-tr" v-for="(item1,index1) in detectionCarReportGetCarReportList.itemsGroup[index]" :key='index1'>
					<u-td class="u-td">
						{{item1.itemsName}}
					</u-td>
					<u-td class="u-td" >
						<text :class="item1.problem==1?'act':''">	{{item1.itemsValue}}</text>
					
					</u-td>
				</u-tr>

			</u-table>
		</view>
	</view>	
		<view v-if="current==2">
			<view class="valuationReport">
					
					<!-- 基础信息 -->
					<view class="valuationReportInfomation commonBox">
						<view class="">
							<view class="valuationReportInfomationT">
								<image src="../../static/cljbxx.png" mode=""></image>
								<text>车辆基础信息</text>
							</view>
							<view class="infomationTitle">
								<view class="qqq" style="margin-top: 50rpx;">
									<text>品牌型号</text>{{ dataJson.seriesName || '--' }}
								</view>
								<view class="qqq">
									<text>款型</text>{{ dataJson.modelYear || '--' }}款 {{ dataJson.shortName || '--' }}
								</view>
								<view class="qqq">
									<text>新车指导价</text>
									<span style='color: #FF552E;' >{{ dataJson.guidePrice || '0' }}万</span>
								</view>
								<view class="carpictrue" v-if="seriesLogo">
									<image :src="picture" mode="aspectFit"></image>
								</view>
								<view class="carpictrue" v-else>
									<image src='../../static/zwtp1.jpg' mode="aspectFit"></image>
								</view>
							<!-- 	<view class="price _flex _justify_between">
									<view class="">
										{{ dataJson.modelYear || '--' }}款 {{ dataJson.shortName || '--' }}
									</view>
									<view class="">
										新车指导价：
										<text style="color: red;margin-left: 10rpx;">{{ dataJson.guidePrice || '0' }}万</text>
									</view>
								</view>
								<view>
									<view class="carpictrue" v-if="seriesLogo">
										<image :src="picture" mode="aspectFit"></image>
									</view>
									<view class="carpictrue" v-else>
										<image src='../../static/zwtp1.jpg' mode="aspectFit"></image>
									</view>
								</view> -->
							</view>
						<!-- 	<view>
								<image style="width: 100%;"  mode="widthFix" :src="https+dataJson.seriesLogo"></image>
							</view> -->
						</view>
						<view class="infomationContent">
							<view class="contentPart">
								<view class="information">所在城市</view>
								<view class="">{{dataJson.cityName || '--'}}</view>
							</view>
							<view class="contentPart">
								<view class="information">上牌日期</view>
								<view class="" v-if="dataJson.regDate">{{dataJson.regDate | changeDates(0,7) }}</view>
							</view>
							<view class="contentPart">
								<view class="information">行驶里程</view>
								<view class="">{{dataJson.mile || '0'}}万公里</view>
							</view>
							<view class="contentPart">
								<view class="information">电池类型</view>
								<view class="">{{dataJson.batteryType || '--'}}</view>
							</view>
						</view>
					</view>
					<!-- 价格分布图 -->
					<view class="commonBox">
						<view class="titletext">
							<view class="titlesqq">
								<image src="../../static/jgfbt.png" mode=""></image>
								<span>价格分布图</span>
							</view>
							<text class="danwei">单位：万元</text>
						</view>
						<view class="priceDistributionImg">
							<view class="priceDistributionImgTab">
								<u-tabs class="priceTab" :height='120' :list="priceImgList" :is-scroll="false" :current="active" @change="activeTapOne" :bar-width="150"
									active-color="#002B56;" font-size="28"></u-tabs>
							</view>
							<view class="">
								<view class="priceNumStyle">
									<view class="" v-for="(item,index) in priceNumList" :key="index">
										<view style="font-size: 32rpx;">{{item.num}}</view>
										<view class="priceArrow"></view>
									</view>
								</view>
								<view class="priceTitleStyle">
									<view class="" v-for="(item,index) in priceNumList" :key="index">
										<view style="border-right: 1px solid #FFFFFF;">{{item.name}}</view>
									</view>
								</view>
								<view class="priceBottomStyle">
									<view class="" v-for="(item,index) in priceNumBottomList" :key="index">
										<view>{{item}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="commonBox">
						<view class="titletext">
							<view class="titlesqq">
								<image src="../../static/jgyc.png" mode=""></image>
								<span>价格预测</span>
							</view>
							<text class="danwei">单位：万元</text>
						</view>
						<view>
							<view class="priceDistributionImgTab">
								<u-tabs class="priceTab" :height='120' :list="priceForecastList" :is-scroll="false" :current="active1" @change="activeTwoTap" :bar-width="220"
									active-color="#002B56;" font-size="28"></u-tabs>
							</view>
							<view style="text-align: center;">
								<zEacher :recentEstimate="recentEstimate"></zEacher>
							</view>
						</view>
					</view>
			<!-- 		<view class="commonBox">
						<view class="titletext">
							同区域省份价格
							<text class="danwei">单位：万元</text>
						</view>
						<view>
							<view style="text-align: center;">
								<tEacher :sameAreaProvincePrice="sameAreaProvincePrice"></tEacher>
							</view>
						</view>
					</view> -->
		</view>
	</view>
		
	</view>
</template>

<script>
	import APImy from "@/api/my.js"
	export default {
		data() {
			return {
				https: getApp().globalData.picturePath,
				list: [{
					name: '云端检测'
				}, {
					name: '线下检测'
				}, {
					name: '估值报告'
				}],
				current: 0,
				detectionCarReportId:34,
				detectionCarReportGetCarReportList:'',
				picture:'',
					dataJson: '',
					seriesLogo:'',
					active: 1,
					active1: 0,
					priceImgList: [{
							name: '车况优秀'
						},
						{
							name: '车况良好'
						},
						{
							name: '车况一般'
						}
					],
					priceForecastList: [{
							name: '近期价格分析'
						},
						{
							name: '未来两年价格'
						}
					],
					priceNumList: [{
							num: "0.00",
							name: '车商收购价'
						},
						{
							num: "0.00",
							name: '个人交易价'
						},
						{
							num: "0.00",
							name: '车商零售价'
						}
					],
					priceNumBottomList: ['0','0','0','0'],
					form: {
						name: '',
						price: '',
						priceLow: ''
					},
					recentEstimate:[],
					sameAreaProvincePrice:[],
				};
		},
		onLoad(options) {
			console.log(JSON.parse(decodeURIComponent(options.data)))
			this.detectionCarReportGetCarReport();
			this.dataJson = JSON.parse(decodeURIComponent(options.data));
			// console.log(this.dataJson)
			this.seriesLogo=this.dataJson.seriesLogo;
			// console.log(this.seriesLogo);
			this.picture = this.https+this.seriesLogo;
			// console.log(this.picture);
			// this.priceNumList[0].num = this.dataJson.valuationInfo.highDealerBuyPrice;//车况优秀：车商收购价
			// this.priceNumList[1].num = this.dataJson.valuationInfo.highPrice;//车况优秀：个人交易价
			// this.priceNumList[2].num = this.dataJson.valuationInfo.highDealerPrice ;//车况优秀：车商零售价
			// this.priceNumBottomList[0] = this.dataJson.valuationInfo.highMimDealerBuyPrice;//车况优秀：车商最低收购价
			// this.priceNumBottomList[1] = this.dataJson.valuationInfo.highMaxDealerBuyPrice;//车况优秀：车商最高收购价
			// this.priceNumBottomList[2] = this.dataJson.valuationInfo.highMaxPrice;//车况优秀：个人最高交易价
			// this.priceNumBottomList[3] = this.dataJson.valuationInfo.highMaxDealerPrice;//车况优秀：车商最高零售价
			this.priceNumList[0].num = this.dataJson.valuationInfo.goodDealerBuyPrice
			this.priceNumList[1].num = this.dataJson.valuationInfo.goodPrice
			this.priceNumList[2].num = this.dataJson.valuationInfo.goodDealerPrice
			this.priceNumBottomList[0] = this.dataJson.valuationInfo.goodMimDealerBuyPrice
			this.priceNumBottomList[1] = this.dataJson.valuationInfo.goodMaxDealerBuyPrice
			this.priceNumBottomList[2] = this.dataJson.valuationInfo.goodMaxPrice
			this.priceNumBottomList[3] = this.dataJson.valuationInfo.goodMaxDealerPrice
			
			// 近期价格
			this.recentEstimate = this.dataJson.valuationInfo.recentEstimate
			
			this.sameAreaProvincePrice = this.dataJson.valuationInfo.sameAreaProvincePrice
			
		},
		methods: {
			//获取线下报告和车辆信息
			detectionCarReportGetCarReport(){
				APImy.detectionCarReportGetCarReport({detectionCarReportId:this.detectionCarReportId}).then(res => {	
					this.detectionCarReportGetCarReportList= res.data;
					console.log(res.data)
				})
			},
			
			change(index) {
				this.current = index;
				console.log(index)
			},
			activeTwoTap(index){
				this.active1 = index
				if(index == 0){
					// 近期价格
					this.recentEstimate = this.dataJson.valuationInfo.recentEstimate
				}else{
					// 两年价格
					this.recentEstimate = this.dataJson.valuationInfo.twoYearEstimate
				}
			},
			activeTapOne(index){
				this.active = index
				if(index == 0){
					this.priceNumList[0].num = this.dataJson.valuationInfo.highDealerBuyPrice
					this.priceNumList[1].num = this.dataJson.valuationInfo.highPrice
					this.priceNumList[2].num = this.dataJson.valuationInfo.highDealerPrice
					this.priceNumBottomList[0] = this.dataJson.valuationInfo.highMimDealerBuyPrice
					this.priceNumBottomList[1] = this.dataJson.valuationInfo.highMaxDealerBuyPrice
					this.priceNumBottomList[2] = this.dataJson.valuationInfo.highMaxPrice
					this.priceNumBottomList[3] = this.dataJson.valuationInfo.highMaxDealerPrice
				}else if(index == 1){
					this.priceNumList[0].num = this.dataJson.valuationInfo.goodDealerBuyPrice
					this.priceNumList[1].num = this.dataJson.valuationInfo.goodPrice
					this.priceNumList[2].num = this.dataJson.valuationInfo.goodDealerPrice
					this.priceNumBottomList[0] = this.dataJson.valuationInfo.goodMimDealerBuyPrice
					this.priceNumBottomList[1] = this.dataJson.valuationInfo.goodMaxDealerBuyPrice
					this.priceNumBottomList[2] = this.dataJson.valuationInfo.goodMaxPrice
					this.priceNumBottomList[3] = this.dataJson.valuationInfo.goodMaxDealerPrice
				}else{
					this.priceNumList[0].num = this.dataJson.valuationInfo.lowDealerBuyPrice
					this.priceNumList[1].num = this.dataJson.valuationInfo.lowPrice
					this.priceNumList[2].num = this.dataJson.valuationInfo.lowDealerPrice
					this.priceNumBottomList[0] = this.dataJson.valuationInfo.lowMimDealerBuyPrice
					this.priceNumBottomList[1] = this.dataJson.valuationInfo.lowMaxDealerBuyPrice
					this.priceNumBottomList[2] = this.dataJson.valuationInfo.lowMaxPrice
					this.priceNumBottomList[3] = this.dataJson.valuationInfo.lowMaxDealerPrice
				}
			}
		}
	}
</script>

<style lang="scss">
	.act{
		color: #FD7E6E;
	}
	.ItemContent {
		color: #FF552E;
	}

	.banner {
		width: 750rpx;
		height: 494rpx;
	
		position: relative;
image{
			width: 100%;
		}
	}

	.footerT {
		padding: 32rpx 32rpx;
		// margin: 32rpx 32rpx;
		background: #fff;
		margin-top: 7rpx;
	}

	.mainBtitles {
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		color: #2C2C2C;
		margin-bottom: 32rpx;

		text {
			font-size: 30rpx;
			color: #2C2C2C;
			margin-left: 20rpx;
			font-size: 300;
		}
	}

	.main {
		padding: 15rpx 32rpx;
		margin: 32rpx;

		.mainStitles {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}

	.type {
		height: 168rpx;
		line-height: 168rpx;
		text-align: center;
		font-family: PingFangSC-Medium;
		font-size: 72rpx;
		color: #2EBC28;
	}

	.carType {
		line-height: 60rpx;
		text-align: center;
		background: #dafdd8;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #2EBC28;
	}

	.typeImg {
		width: 100%;
		height: 177rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		border-bottom: 1px solid #efefef;

		view {
			width: 117rpx;
			height: 157rpx;
			// background: #000;
			position: relative;

			.dui {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: -16rpx;
				right: -16rpx;
			}

			.imgss {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				display: block;
				margin: auto;
			}

			text {
				font-size: 24rpx;
				color: #2C2C2C;
				text-align: center;
				display: block;
				margin: auto;
				margin-top: 10rpx;
			}
		}
	}

	.times {
		height: 80rpx;
		color: #999;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.bgs {
		background: #f4f6f8;
		line-height: 60rpx;
		font-size: 30rpx;
		text-align: center;
		margin-top: 32rpx;
		color: #002B56;
	}

	.xinxi {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;

		.textCss {
			width: 325rpx;
			display: flex;
			color: #999;
			line-height: 60rpx;
			font-size: 26rpx;

			view {
				width: 135rpx;
			}

			text {
				color: #000;
				margin-left: 30rpx;
			}
		}
	}

	.sjk {
		font-size: 28rpx;
		color: #2C2C2C;
	}

	.car {
		width: 572rpx;
		height: 110rpx;
		margin: auto;
		background: #FFF2F1;
		color: #FD7E6E;
		text-align: center;
		margin-top: 30rpx;
		line-height: 50rpx;
	}

	.sgjc {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-around;
		color: #2C2C2C;
		border-bottom: 1px solid #efefef;
	}

	.tit {
		text-align: left;
		display: flex;

		image {
			width: 38rpx;
			height: 30rpx;
			margin-right: 20rpx;
			margin-top: 5rpx;
		}
	}

	.ttt {
		font-weight: bold;
		color: #2C2C2C;
	}

	.tit1 {
		text-align: left;
	}
	
	.typeImg{
		width: 100%;
		height: 177rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		view{
			width: 117rpx;
			height: 157rpx;
			// background: #000;
			.imgss{
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				display: block;
				margin: auto;
			}
			text{
				font-size: 24rpx;
				color: #2C2C2C;
				text-align: center;
				display: block;
				margin: auto;
				margin-top: 10rpx;
			}
		}
	}
	
	.jcsj{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
	}
	
	
	.valuationReportInfomationT{
		display: flex;
		image{
			width: 38rpx;
			height: 38rpx;
		}
		text{
			font-family: PingFangSC-Medium;
			font-size: 30rpx;
			color: #2C2C2C;
			padding-left: 20rpx;
		}
	}
	.carpictrue {
		width: 100%;
		height: 562rpx;
	}
	.carpictrue image{
		width: 100%;
		height: 562rpx;
	}
	.valuationReport{
		// padding:0 32rpx;
	}
	.valuationReportInfomation {
		margin-top: 10rpx !important;
		padding: 30rpx;
		.infomationTitle {
			.price {
				color: #666;
			}
			text{
				font-family: PingFangSC-Medium;
				font-size: 30rpx;
				color: #2C2C2C;
				width: 170rpx;
				display: block;
			}
			.qqq{
				// height: 42rpx;
				line-height: 42rpx;
				margin-top: 25rpx;
				font-family: PingFangSC-Regular;
				font-size: 30rpx;
				color: #2C2C2C;
				display: flex;
			}
		}
	
		.infomationContent {
			display: flex;
	
			.contentPart {
				flex-grow: 1;
				// border-right: 1px solid #e6e6e6;
				text-align: center;
				font-family: PingFangSC-Medium;
				font-size: 28rpx;
				color: #2C2C2C;
				.information {
					color: #999;
					margin-bottom: 10rpx;
					font-size: 22rpx;
				}
			}
	
			.contentPart:last-child {
				border-right: none
			}
		}
	}
	
	.titletext {
		padding: 10px;
		font-weight: bold;
		font-size: 30rpx;
		color: #2C2C2C;
		    display: flex;
		    justify-content: space-between;
		span{
			display: block;
		}
		.titlesqq{
			display: flex;
		}
		image{
			width: 34rpx;
			height: 34rpx;
			margin-right: 20rpx;
		}
		.danwei{
			color:#999;
			float: right;
			font-size: 28rpx;
			font-weight:initial;
		}
	}
	
	.priceDistributionImgTab {
		border-bottom: 1px solid #ececec;
		
		.active {
			background-color: #fff;
			color: #333;
		}
	}
	
	.priceDistributionImg {
	
		.priceNumStyle,
		.priceTitleStyle,
		.priceBottomStyle {
			display: flex;
			text-align: center;
	
			>view {
				flex-grow: 1;
				padding: 10rpx 0;
			}
		}
	
		.priceNumStyle {
			>view {
				padding-bottom: 0;
			}
	
			margin-top: 20rpx;
	
			.priceArrow {
				display: inline-block;
				margin: auto;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 4px solid #002A55;
				height: 0;
				width: 0;
			}
		}
	
		.priceTitleStyle {
			background-color: #002A55;
			border-style: solid;
			border-color: #fff;
			border-width: 0 10px;
			color: #fff;
			>view:last-child {
				>view {
					border: none !important
				}
			}
		}
	
		.priceBottomStyle {
			>view:first-child {
				text-align: left;
				margin-left: 4%;
			}
	
			>view:nth-child(2) {
				margin-right: 10%;
			}
	
			>view:last-child {
				text-align: right;
				margin-right: 4%;
			}
	
			padding-bottom: 30rpx;
		}
	}
	
	.bagColorWhite {
		background-color: #fff;
	}
	
	.highlightPart {
		flex-grow: 1;
	}
	
	.chengjiaoPart {
		.chengjiaoList {
			padding: 30rpx 20rpx;
			border-bottom: 1px solid #ccc;
		}
	
		.chengjiaoList:last-child {
			border: none;
		}
	}
	.commonBox{
		background-color: #fff;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}
</style>
